<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户列表</title>
    <link rel="stylesheet" href="../css/list.css">
</head>

<body>

    <div>
        <div>
            <h1>用户列表</h1>
            <div>
                <input type="text" id="keyword" value="{{keyword}}" placeholder="请输入内容">
                <input type="button" value="搜 索" onclick="filtUser()">
                <input type="button" value="增 加" onclick="addUser()">
            </div>
            <table>
                <tr>
                    <td>编号</td>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>操作</td>
                </tr>
                {%for user in users%}
                <tr>
                    <td>{{user.id}}</td>
                    <td>{{user.name}}</td>
                    <td>{{user.age}}</td>
                    <td>
                        <input type="button" value="编辑" onclick="editUser('{{user.id}}')">
                        <input type="button" value="删除" onclick="delUser('{{user.id}}')">
                    </td>
                </tr>
                {% endfor %}
            </table>
        </div>
    </div>


    <script src="../js/axios.min.js"></script>
    <script>
        function editUser(id) {
            location.href = `/user/${id}`
        }

        function addUser() {
            console.log(11);

            location.href = "/userAdd"
        }

        function delUser(id) {
            if (confirm("确认删除吗")) {
                axios.delete(`/user/${id}`).then(() => {
                    location.href = '/users'  //删除成功重新发出请求列表
                })
            }
        }

        function filtUser() {
            let keyword = document.querySelector('#keyword').value
            // console.log(keyword);
            location.href = `/users?keyword=${keyword}`
        }
    </script>
</body>

</html>